<template>
<section id="k8s-namespace-detail">

    <el-collapse v-model="activeNames">

        <el-collapse-item title="工作负载" name="1" style="margin-bottom: 2px">
    <el-card style="margin-bottom: 20px" class="bg-card">
        <div>守护进程集</div>
        <hr>
        <el-table
                :data="NamespaceDetail.daemonsets"
                style="width: 100%;"
                :row-style="rowStyle"
                :header-row-style="headerStyle"
                header-cell-class-name="bg-card"
        >
            <template slot="empty">
                <p>没有守护进程集可显示</p>
            </template>
            <el-table-column
                    prop="name"
                    label="名称"
                    width="250">
                <template slot-scope="scope">
                    <el-link :href="'#/kubernetes/daemonset/' + scope.row.name + '?namespace=' + $route.params.name"  type="primary" :underline="false" icon="el-icon-s-promotion">{{scope.row.name}}</el-link>
                </template>
            </el-table-column>
            <el-table-column
                    prop="labels"
                    label="标签"
                    width="350"
            >
                <template slot-scope="scope">
                    <div v-for="(v,k) in scope.row.labels">
                        <el-tag  type="info" size="mini">{{k}}: {{v}}</el-tag>
                    </div>
                </template>


            </el-table-column>
            <el-table-column
                    prop="containergroup"
                    label="容器组"
                    width="100"
            >
            </el-table-column>
            <el-table-column
                    prop="createdate"
                    label="创建日期"
                    width="100"
            >
            </el-table-column>
            <el-table-column
                    prop="tempimage"
                    label="镜像">
                <template slot-scope="scope">
                    <div v-for="image in scope.row.tempimage">
                        <el-tag  type="info" size="mini">{{image}}</el-tag>
                    </div>
                </template>

            </el-table-column>
            <el-table-column label="操作">
                <template slot-scope="scope">
                    <el-button
                            size="mini"
                            type="warning"
                            plain
                            icon="el-icon-edit"
                            @click="editResourceYaml(scope.row.name,$route.params.name,'daemonsets')"
                    ></el-button>
                    <el-button
                            size="mini"
                            type="danger"
                            plain
                            icon="el-icon-delete"
                            @click="deleteKubernetesResource(scope.row.name,$route.params.name,'daemonsets')"
                    ></el-button>


                </template>
            </el-table-column>
        </el-table>

    </el-card>

    <el-card style="margin-bottom: 20px" class="bg-card">
        <div>任务</div>
        <hr>
        <el-table
                :data="NamespaceDetail.jobs"
                style="width: 100%;"
                :row-style="rowStyle"
                :header-row-style="headerStyle"
                header-cell-class-name="bg-card"
        >
            <template slot="empty">
                <p>没有任务可显示</p>
            </template>
            <el-table-column
                    prop="name"
                    label="名称"
                    width="250">
                <template slot-scope="scope">
                    <el-link :href="'#/kubernetes/jobs/' + scope.row.name + '?namespace=' + $route.params.name"  type="primary" :underline="false" icon="el-icon-s-promotion">{{scope.row.name}}</el-link>
                </template>
            </el-table-column>
            <el-table-column
                    prop="labels"
                    label="标签"
                    width="350"
            >
                <template slot-scope="scope">
                    <div v-for="(v,k) in scope.row.labels">
                        <el-tag  type="info" size="mini">{{k}}: {{v}}</el-tag>
                    </div>
                </template>


            </el-table-column>
            <el-table-column
                    prop="containergroup"
                    label="容器组"
                    width="100"
            >
            </el-table-column>
            <el-table-column
                    prop="createdate"
                    label="创建日期"
                    width="100"
            >
            </el-table-column>
            <el-table-column
                    prop="tempimage"
                    label="镜像">
                <template slot-scope="scope">
                    <div v-for="image in scope.row.images">
                        <el-tag  type="info" size="mini">{{image}}</el-tag>
                    </div>
                </template>

            </el-table-column>
            <el-table-column label="操作">
                <template slot-scope="scope">
                    <el-button
                            size="mini"
                            type="warning"
                            plain
                            icon="el-icon-edit"
                            @click="editResourceYaml(scope.row.name,$route.params.name,'jobs')"
                    ></el-button>
                    <el-button
                            size="mini"
                            type="danger"
                            plain
                            icon="el-icon-delete"
                            @click="deleteKubernetesResource(scope.row.name,$route.params.name,'jobs')"
                    ></el-button>

                </template>
            </el-table-column>
        </el-table>
    </el-card>
    <el-card style="margin-bottom: 20px" class="bg-card">
        <div>部署</div>
        <hr>
        <el-table
                :data="NamespaceDetail.deployments"
                style="width: 100%;"
                :row-style="rowStyle"
                :header-row-style="headerStyle"
                header-cell-class-name="bg-card"

        >
            <template slot="empty">
                <p>暂无部署</p>
            </template>
            <el-table-column
                    prop="name"
                    label="名称"
                    width="250">
                <template slot-scope="scope">
                    <el-link :href="'#/kubernetes/deployment/' + scope.row.name + '?namespace=' + $route.params.name"  type="primary" :underline="false" icon="el-icon-s-promotion">{{scope.row.name}}</el-link>
                </template>
            </el-table-column>
            <el-table-column
                    prop="labels"
                    label="标签"
                    width="350"
            >
                <template slot-scope="scope">
                    <div v-for="(v,k) in scope.row.labels">
                        <el-tag  type="info" size="mini">{{k}}: {{v}}</el-tag>
                    </div>
                </template>


            </el-table-column>
            <el-table-column
                    prop="containergroup"
                    label="容器组"
                    width="100"
            >
            </el-table-column>
            <el-table-column
                    prop="createdate"
                    label="创建日期"
                    width="100"
            >
            </el-table-column>
            <el-table-column
                    prop="tempimage"
                    label="镜像">
                <template slot-scope="scope">
                    <div v-for="image in scope.row.tempimage">
                        <el-tag  type="info" size="mini">{{image}}</el-tag>
                    </div>
                </template>

            </el-table-column>
            <el-table-column label="操作">
                <template slot-scope="scope">
                    <el-button
                            size="mini"
                            type="warning"
                            plain
                            icon="el-icon-edit"
                            @click="editResourceYaml(scope.row.name,$route.params.name,'deployments')"
                    ></el-button>
                    <el-button
                            size="mini"
                            type="danger"
                            plain
                            icon="el-icon-delete"
                            @click="deleteKubernetesResource(scope.row.name,$route.params.name,'deployments')"
                    ></el-button>


                </template>
            </el-table-column>
        </el-table>
    </el-card>
    <el-card style="margin-bottom: 20px" class="bg-card">
        <div>有状态副本集</div>
        <hr>
        <el-table
                :data="NamespaceDetail.statefulesets"
                style="width: 100%;"
                :row-style="rowStyle"
                :header-row-style="headerStyle"
                header-cell-class-name="bg-card"
        >
            <template slot="empty">
                <p>暂无有状态副本集</p>
            </template>
            <el-table-column
                    prop="name"
                    label="名称"
                    width="250">
                <template slot-scope="scope">
                    <el-link :href="'#/kubernetes/statefulset/' + scope.row.name + '?namespace=' + $route.params.name"  type="primary" :underline="false" icon="el-icon-s-promotion">{{scope.row.name}}</el-link>
                </template>
            </el-table-column>
            <el-table-column
                    prop="labels"
                    label="标签"
                    width="350"
            >
                <template slot-scope="scope">
                    <div v-for="(v,k) in scope.row.labels">
                        <el-tag  type="info" size="mini">{{k}}: {{v}}</el-tag>
                    </div>
                </template>


            </el-table-column>
            <el-table-column
                    prop="containergroup"
                    label="容器组"
                    width="100"
            >
            </el-table-column>
            <el-table-column
                    prop="createdate"
                    label="创建日期"
                    width="100"
            >
            </el-table-column>
            <el-table-column
                    prop="tempimage"
                    label="镜像">
                <template slot-scope="scope">
                    <div v-for="image in scope.row.images">
                        <el-tag  type="info" size="mini">{{image}}</el-tag>
                    </div>
                </template>

            </el-table-column>
            <el-table-column label="操作">
                <template slot-scope="scope">
                    <el-button
                            size="mini"
                            type="warning"
                            plain
                            icon="el-icon-edit"
                            @click="editResourceYaml(scope.row.name,$route.params.name,'statefulsets')"
                    ></el-button>
                    <el-button
                            size="mini"
                            type="danger"
                            plain
                            icon="el-icon-delete"
                            @click="deleteKubernetesResource(scope.row.name,$route.params.name,'statefulsets')"
                    ></el-button>

                </template>
            </el-table-column>
        </el-table>


    </el-card>

        </el-collapse-item>

        <el-collapse-item title="服务发现与负载均衡" name="2" style="margin-bottom: 2px">
        <el-card style="margin-bottom: 20px" class="bg-card">
        <div>服务</div>
        <hr>
        <el-table
                :data="NamespaceDetail.services"
                style="width: 100%;"
                :row-style="rowStyle"
                :header-row-style="headerStyle"
                header-cell-class-name="bg-card"
        >
            <template slot="empty">
                <p>NO SERVICE </p>
            </template>
            <el-table-column
                    prop="name"
                    label="名称"
                    width="250">
            </el-table-column>
            <el-table-column
                    prop=""
                    label="选择器"
                    width="200"
                    >
                <template slot-scope="scope">
                    <div v-for="svc in scope.row.selector">
                        <el-tag  type="info" size="mini">{{svc}}</el-tag>
                    </div>
                </template>


            </el-table-column>
            <el-table-column
                    prop="demainname"
                    label="集群域名"
                    width="300">
            </el-table-column>
            <el-table-column
                    prop=""
                    label="访问端点"
                    fit
            >
                <template slot-scope="scope">
                    <div v-for="ep in scope.row.endpoints">
                        <el-tag  type="info" size="mini">{{ep}}</el-tag>
                    </div>
                </template>
            </el-table-column>
            <el-table-column
                    prop="createdate"
                    label="创建日期">
            </el-table-column>
            <el-table-column label="操作">
                <template slot-scope="scope">
                    <el-button
                            size="mini"
                            type="warning"
                            plain
                            icon="el-icon-edit"
                            @click="editResourceYaml(scope.row.name,$route.params.name,'services')"
                    ></el-button>
                    <el-button
                            size="mini"
                            type="danger"
                            plain
                            icon="el-icon-delete"
                            @click="deleteKubernetesResource(scope.row.name,$route.params.name,'services')"
                    ></el-button>


                </template>
            </el-table-column>
        </el-table>
    </el-card>
        </el-collapse-item>

        <el-collapse-item title="配置与存储" name="3" style="margin-bottom: 2px">
            <el-card style="margin-bottom: 20px" class="bg-card">
        <div>配置集</div>
        <hr>
        <el-table
                :data="NamespaceDetail.configmaps"
                style="width: 100%;"
                :row-style="rowStyle"
                :header-row-style="headerStyle"
                header-cell-class-name="bg-card"
        >
            <template slot="empty">
                <p>暂无配置集</p>
            </template>
            <el-table-column
                    prop="name"
                    label="名称"
                    width="250">
                <template slot-scope="scope">
                    <el-link :href="'#/kubernetes/configmap/' + scope.row.name + '?namespace=' + $route.params.name"  type="primary" :underline="false" icon="el-icon-s-promotion">{{scope.row.name}}</el-link>
                </template>
            </el-table-column>
            <el-table-column
                    prop="labels"
                    label="标签"

            >
                <template slot-scope="scope">
                    <div v-if="scope.row.labels !== null">
                    <div v-for="(v,k) in scope.row.labels">
                        <el-tag  type="info" size="mini">{{k}}: {{v}}</el-tag>
                    </div>
                    </div>
                    <div v-else>--</div>
                </template>


            </el-table-column>

            <el-table-column
                    prop="createdate"
                    label="创建日期"

            >
            </el-table-column>
            <el-table-column label="操作">
                <template slot-scope="scope">
                    <el-button
                            size="mini"
                            type="warning"
                            plain
                            icon="el-icon-edit"
                            @click="editResourceYaml(scope.row.name,$route.params.name,'configmaps')"
                    ></el-button>
                    <el-button
                            size="mini"
                            type="danger"
                            plain
                            icon="el-icon-delete"
                            @click="deleteKubernetesResource(scope.row.name,$route.params.name,'configmaps')"
                    ></el-button>


                </template>
            </el-table-column>

        </el-table>

    </el-card>
            <el-card style="margin-bottom: 20px" class="bg-card">
                <div>持久化存储卷索取</div>
                <hr>
                <el-table
                        :data="NamespaceDetail.pvcs"
                        style="width: 100%;"
                        :row-style="rowStyle"
                        :header-row-style="headerStyle"
                        header-cell-class-name="bg-card"
                >

                    <template slot="empty">
                        <p>暂无持久化存储</p>
                    </template>
                    <el-table-column
                            prop="name"
                            label="名称"
                            width="250">
                        <template slot-scope="scope">
                            <el-link :href="'#/kubernetes/persistentvolumeclaim/' + scope.row.name + '?namespace=' + $route.params.name"  type="primary" :underline="false" icon="el-icon-s-promotion">{{scope.row.name}}</el-link>
                        </template>
                    </el-table-column>

                    <el-table-column

                            label="存储券"
                            width="250">
                        <template slot-scope="scope">
                            <el-link :href="'#/kubernetes/persistentvolume/' + scope.row.persistentVolume "  type="primary" :underline="false" >{{scope.row.persistentVolume}}</el-link>
                        </template>
                    </el-table-column>
                    <el-table-column
                            prop="labels"
                            label="标签"

                    >
                        <template slot-scope="scope">
                            <div v-if="scope.row.labels !== null">
                                <div v-for="(v,k) in scope.row.labels">
                                    <el-tag  type="info" size="mini">{{k}}: {{v}}</el-tag>
                                </div>
                            </div>
                            <div v-else>--</div>
                        </template>


                    </el-table-column>


                    <el-table-column
                            prop="createdate"
                            label="创建日期"

                    >
                    </el-table-column>
                    <el-table-column label="操作">
                        <template slot-scope="scope">
                            <el-button
                                    size="mini"
                                    type="warning"
                                    plain
                                    icon="el-icon-edit"
                                    @click="editResourceYaml(scope.row.name,$route.params.name,'persistentvolumeclaims')"
                            ></el-button>
                            <el-button
                                    size="mini"
                                    type="danger"
                                    plain
                                    icon="el-icon-delete"
                                    @click="deleteKubernetesResource(scope.row.name,$route.params.name,'persistentvolumeclaims')"
                            ></el-button>


                        </template>
                    </el-table-column>

                </el-table>

            </el-card>
            <el-card style="margin-bottom: 20px" class="bg-card">
        <div>保密字典</div>
        <hr>
        <el-table
                :data="NamespaceDetail.secrets"
                style="width: 100%;"
                :row-style="rowStyle"
                :header-row-style="headerStyle"
                header-cell-class-name="bg-card"
        >
            <el-table-column
                    prop="name"
                    label="名称"
                    width="250">
                <template slot-scope="scope">
                    <el-link :href="'#/kubernetes/secret/' + scope.row.name + '?namespace=' + $route.params.name"  type="primary" :underline="false" icon="el-icon-s-promotion">{{scope.row.name}}</el-link>
                </template>
            </el-table-column>
            <el-table-column
                    prop="labels"
                    label="标签"

            >
                <template slot-scope="scope">
                    <div v-if="scope.row.labels !== null">
                        <div v-for="(v,k) in scope.row.labels">
                            <el-tag  type="info" size="mini">{{k}}: {{v}}</el-tag>
                        </div>
                    </div>
                    <div v-else>--</div>
                </template>


            </el-table-column>

            <el-table-column
                    prop="createdate"
                    label="创建日期"

            >
            </el-table-column>


        </el-table>

    </el-card>

    <el-card style="margin-bottom: 20px" class="bg-card">
        <div>事件</div>
        <hr>
        <el-table
                :data="NamespaceDetail.events"
                style="width: 100%;"
                :row-style="rowStyle"
                :header-row-style="headerStyle"
                header-cell-class-name="bg-card"
        >

            <template slot="empty">
                <p>暂无事件内容</p>
            </template>

            <el-table-column type="expand">
                <template slot-scope="props" >
                    <el-form label-position="left"  class="demo-table-expand" label-width="100px">
                        <el-form-item label="名称">
                            <span>{{ props.row.name }}</span>
                        </el-form-item>
                        <el-form-item label="种类">
                            <span>{{ props.row.kind }}</span>
                        </el-form-item>
                        <el-form-item label="子对象">
                            <span>{{ props.row.childobject }}</span>
                        </el-form-item>
                        <el-form-item label="总数">
                            <span>{{ props.row.num }}</span>
                        </el-form-item>
                        <el-form-item label="类型">
                            <span>{{ props.row.type }}</span>
                        </el-form-item>
                        <el-form-item label="来源">
                            <span>{{ props.row.source }}</span>
                        </el-form-item>
                        <el-form-item label="消息">
                            <span>{{ props.row.message }}</span>
                        </el-form-item>
                        <el-form-item label="原因">
                            <span>{{ props.row.reason }}</span>
                        </el-form-item>
                        <el-form-item label="最近发生时间">
                            <span>{{ props.row.lastoccurtime }}</span>
                        </el-form-item>
                    </el-form>
                </template>
            </el-table-column>


            <el-table-column
                prop="message"
                label="消息"
                width="600">
        </el-table-column>
            <el-table-column
                    prop="source"
                    label="来源">
            </el-table-column>
            <el-table-column
                    prop="childobject"
                    label="子对象"
            >
            </el-table-column>

            <el-table-column
                    prop="lastoccurtime"
                    label="最近发生时间">
            </el-table-column>
        </el-table>
    </el-card>
        </el-collapse-item>
        <el-dialog :title=yamlTitle :visible.sync="editK8sResourceYamlVisible" :close-on-click-modal="false">
            <vue-json-editor v-model="yamlMeta" :show-btns="false"  mode="tree" ></vue-json-editor>

            <div slot="footer" class="dialog-footer">
                <el-button size="small" @click="editK8sResourceYamlVisible=false">取 消</el-button>
                <el-button size="small" @click="updateResourcceFromYaml" >更 新</el-button>
            </div>
        </el-dialog>

    </el-collapse>
</section>
</template>
<script>
    import vueJsonEditor from 'vue-json-editor'
    import { k8sNamespaceDetailData,deleteK8sResource,K8sResourceYaml,UpdateResourceUseYaml } from '../../api/api'
    export default {
        data() {
            return {
                NamespaceDetail: {
                    deployments:{},
                },
                activeNames: ['1'],
                yamlTitle:"",
                editResourceName:"",
                editResourceType:"",
                yamlMeta:{},
                editK8sResourceYamlVisible: false,
            };
        },
        methods: {
            getK8sNamespaceDetailData(){
                let self = this
                let param = {name:this.$route.params.name}
                k8sNamespaceDetailData(param).then((res) => {
                    console.log(res)
                    self.NamespaceDetail.deployments = res.deployments
                    self.NamespaceDetail.services = res.services

                    self.NamespaceDetail.events = res.events
                    self.NamespaceDetail.configmaps = res.configmaps
                    self.NamespaceDetail.secrets = res.secrets
                    self.NamespaceDetail.jobs = res.jobs
                    self.NamespaceDetail.statefulesets = res.statefulesets
                    self.NamespaceDetail.pvcs = res.pvcs
                    self.NamespaceDetail.daemonsets = res.daemonsets

                })

            },

            deleteKubernetesResource(name,namespace,type){

                let self = this
                let param = {name:name,namespace:namespace,type:type}
                // deleteK8sPod(param).then((res) => {
                // })
                // self.getK8sReplicaSetDetailData()

                this.$confirm('确定删除?', '警告', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                }).then(() => {
                    deleteK8sResource(param).then((res) => {
                        if (res.code === 200) {
                            this.$message({
                                type: 'success',
                                message: '删除成功!'
                            });

                        }else if (res.code === 400) {
                            self.$alert(res.message, '删除失败', {
                                confirmButtonText: '确定',
                            });
                        }
                    })


                }).catch(() => {

                });

                // self.getK8sReplicaSetDetailData()
                // this.reload()

            },
            editResourceYaml(name,namespace,type){
                let self = this
                let param = {name:name,namespace:namespace,type:type}
                K8sResourceYaml(param).then((res) => {
                    // console.log(res.metadata)
                    console.log(JSON.parse(res.metadata))
                    self.yamlMeta = JSON.parse(res.metadata)
                })
                // console.log(self.yamlMeta)
                self.yamlTitle = "修改" + type + ": " + name
                self.editResourceName = name
                self.editResourceType = type
                self.editK8sResourceYamlVisible = true


            },
            updateResourcceFromYaml(){
                let self = this
                // console.log(self.yamlMeta)

                let param = {name:self.editResourceName,namespace:self.$route.params.name,type:self.editResourceType,podYaml:self.yamlMeta}
                // console.log(param)
                UpdateResourceUseYaml(param).then((res) => {
                    if (res.code === 400) {
                        // alert(res.message)
                        self.$alert(res.message, '更新错误', {
                            confirmButtonText: '确定',
                        });
                    }
                })
                self.editK8sResourceYamlVisible = false

            },

            rowStyle({ row, rowIndex}){
                return "height:40px;background-color: #FAFAFA;"
            },
            headerStyle({ row, rowIndex}){
                return "height:20px;color:#0099FF;background-color: #FAFAFA;"
            },
        },
        mounted: function () {
            console.log(this.$route.params.name)
            this.getK8sNamespaceDetailData()

        },
        components: {
            vueJsonEditor
        },
    }
</script>

<style >
    #k8s-namespace-detail .demo-table-expand {
        font-size: 0;
    }
    #k8s-namespace-detail .demo-table-expand label {
        width: 90px;
        color: #99a9bf;
    }
    #k8s-namespace-detail .demo-table-expand .el-form-item {
        margin-right: 0;
        margin-bottom: 0;
        width: 50%;
    }


    #k8s-namespace-detail .el-collapse-item__header{
        background-color: #B0C4DE;
        height: 30px;
        border-radius: 8px;
        margin-bottom: 3px;
    }
    #k8s-namespace-detail .el-collapse-item__content {
        padding-bottom: 5px;
    }

    #k8s-namespace-detail .bg-card {
        background-color: #FAFAFA;
    }
    #k8s-namespace-detail .el-table__empty-block {
        background-color: #FAFAFA;
        height: 40px;
        font-weight: bold;
    }

</style>
